import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import { Form, Button, InputNumber, Affix } from 'antd';
import FormCondition from '@/components/FormCondition';
import DrawerCondition from '@/components/DrawerCondition';
import aliOssUpload from '@/utils/aliOssUpload';
import moment from 'moment';
const FormItem = Form.Item;
const ProduceForm = (props) => {
    const { dispatch, visible = {}, onClose, handleCallback, loading } = props;
    const { show = false, detail = {} } = visible;
    const { id } = detail;
    const [form] = Form.useForm();

    const fetchMenuEdit = () => {
        form.validateFields().then(async (values) => {
            const { city = [] } = values
            const listCodeName = ['provinceCode', 'cityCode', 'districtCode']
            const data = city.reduce((item, val, index) => {
                return {
                    ...item,
                    [listCodeName[index]]: val
                }
            }, {})
            delete values.city
            dispatch({
                type: 'answering/fakeSaveCampus',
                payload: {
                    ...values,
                    ...data,
                    id
                },
                callback: () => {
                    onClose()
                    handleCallback()
                }
            })
        });
    };

    useEffect(() => { }, []);
    const formItems = [
        { label: '校区名称', name: 'campusName' },
        {
            label: '地区', name: 'city', type: 'cascader',
            onChange: (e, option = []) => {
                const listName = ['provinceName', 'cityName', 'districtName']
                const data = option.reduce((item, val, index) => {
                    const { label } = val
                    return {
                        ...item,
                        [listName[index]]: label
                    }
                }, {})
                form.setFieldsValue(data)
            }
        },
        {
            label: '省份名称', name: 'provinceName',
            hidden: true,
            rules: [{ required: false }]
        },
        {
            label: '城市名称', name: 'cityName',
            hidden: true,
            rules: [{ required: false }]
        },
        {
            label: '区县名称', name: 'districtName',
            hidden: true,
            rules: [{ required: false }]
        },
        {
            label: '地址', name: 'address',
        },
        {
            label: '备注',
            name: 'remark',
            type: 'textArea',
            rules: [{ required: false }],
        },
        {
            label: '联系方式', name: 'phone',
        },

    ];

    const modalProps = {
        title: `${detail.id ? '编辑校区' : '新增校区'}`,
        visible: show,
        onClose,
        footer: (
            <Button type="primary" loading={loading} onClick={fetchMenuEdit}>
                确定
            </Button>
        ),
    };

    return (
        <DrawerCondition {...modalProps}>
            <FormCondition form={form} formItems={formItems} initialValues={detail}></FormCondition>
        </DrawerCondition>
    );
};

export default connect(({ loading, }) => ({
    loading: loading.effects['answering/fakeSaveCampus'],
}))(ProduceForm);
